.box {
  display: flex;
  width: 800px;
  height: 450px;
  margin: 100px auto 0 auto;
  transform: perspective(3200px);
}
.carousel {
  position: relative;
  transform-style: preserve-3d;
  flex: 1;
  height: 100%;
}
.carousel:nth-of-type(1) {
  transition: all 0.8s ease-in-out 0s;
}
.carousel:nth-of-type(1) div.carousel-item {
  background-position: 0px 0;
}
.carousel:nth-of-type(2) {
  transition: all 0.8s ease-in-out 0.001s;
}
.carousel:nth-of-type(2) div.carousel-item {
  background-position: -8px 0;
}
.carousel:nth-of-type(3) {
  transition: all 0.8s ease-in-out 0.002s;
}
.carousel:nth-of-type(3) div.carousel-item {
  background-position: -16px 0;
}
.carousel:nth-of-type(4) {
  transition: all 0.8s ease-in-out 0.003s;
}
.carousel:nth-of-type(4) div.carousel-item {
  background-position: -24px 0;
}
.carousel:nth-of-type(5) {
  transition: all 0.8s ease-in-out 0.004s;
}
.carousel:nth-of-type(5) div.carousel-item {
  background-position: -32px 0;
}
.carousel:nth-of-type(6) {
  transition: all 0.8s ease-in-out 0.005s;
}
.carousel:nth-of-type(6) div.carousel-item {
  background-position: -40px 0;
}
.carousel:nth-of-type(7) {
  transition: all 0.8s ease-in-out 0.006s;
}
.carousel:nth-of-type(7) div.carousel-item {
  background-position: -48px 0;
}
.carousel:nth-of-type(8) {
  transition: all 0.8s ease-in-out 0.007s;
}
.carousel:nth-of-type(8) div.carousel-item {
  background-position: -56px 0;
}
.carousel:nth-of-type(9) {
  transition: all 0.8s ease-in-out 0.008s;
}
.carousel:nth-of-type(9) div.carousel-item {
  background-position: -64px 0;
}
.carousel:nth-of-type(10) {
  transition: all 0.8s ease-in-out 0.009s;
}
.carousel:nth-of-type(10) div.carousel-item {
  background-position: -72px 0;
}
.carousel:nth-of-type(11) {
  transition: all 0.8s ease-in-out 0.01s;
}
.carousel:nth-of-type(11) div.carousel-item {
  background-position: -80px 0;
}
.carousel:nth-of-type(12) {
  transition: all 0.8s ease-in-out 0.011s;
}
.carousel:nth-of-type(12) div.carousel-item {
  background-position: -88px 0;
}
.carousel:nth-of-type(13) {
  transition: all 0.8s ease-in-out 0.012s;
}
.carousel:nth-of-type(13) div.carousel-item {
  background-position: -96px 0;
}
.carousel:nth-of-type(14) {
  transition: all 0.8s ease-in-out 0.013s;
}
.carousel:nth-of-type(14) div.carousel-item {
  background-position: -104px 0;
}
.carousel:nth-of-type(15) {
  transition: all 0.8s ease-in-out 0.014s;
}
.carousel:nth-of-type(15) div.carousel-item {
  background-position: -112px 0;
}
.carousel:nth-of-type(16) {
  transition: all 0.8s ease-in-out 0.015s;
}
.carousel:nth-of-type(16) div.carousel-item {
  background-position: -120px 0;
}
.carousel:nth-of-type(17) {
  transition: all 0.8s ease-in-out 0.016s;
}
.carousel:nth-of-type(17) div.carousel-item {
  background-position: -128px 0;
}
.carousel:nth-of-type(18) {
  transition: all 0.8s ease-in-out 0.017s;
}
.carousel:nth-of-type(18) div.carousel-item {
  background-position: -136px 0;
}
.carousel:nth-of-type(19) {
  transition: all 0.8s ease-in-out 0.018s;
}
.carousel:nth-of-type(19) div.carousel-item {
  background-position: -144px 0;
}
.carousel:nth-of-type(20) {
  transition: all 0.8s ease-in-out 0.019s;
}
.carousel:nth-of-type(20) div.carousel-item {
  background-position: -152px 0;
}
.carousel:nth-of-type(21) {
  transition: all 0.8s ease-in-out 0.02s;
}
.carousel:nth-of-type(21) div.carousel-item {
  background-position: -160px 0;
}
.carousel:nth-of-type(22) {
  transition: all 0.8s ease-in-out 0.021s;
}
.carousel:nth-of-type(22) div.carousel-item {
  background-position: -168px 0;
}
.carousel:nth-of-type(23) {
  transition: all 0.8s ease-in-out 0.022s;
}
.carousel:nth-of-type(23) div.carousel-item {
  background-position: -176px 0;
}
.carousel:nth-of-type(24) {
  transition: all 0.8s ease-in-out 0.023s;
}
.carousel:nth-of-type(24) div.carousel-item {
  background-position: -184px 0;
}
.carousel:nth-of-type(25) {
  transition: all 0.8s ease-in-out 0.024s;
}
.carousel:nth-of-type(25) div.carousel-item {
  background-position: -192px 0;
}
.carousel:nth-of-type(26) {
  transition: all 0.8s ease-in-out 0.025s;
}
.carousel:nth-of-type(26) div.carousel-item {
  background-position: -200px 0;
}
.carousel:nth-of-type(27) {
  transition: all 0.8s ease-in-out 0.026s;
}
.carousel:nth-of-type(27) div.carousel-item {
  background-position: -208px 0;
}
.carousel:nth-of-type(28) {
  transition: all 0.8s ease-in-out 0.027s;
}
.carousel:nth-of-type(28) div.carousel-item {
  background-position: -216px 0;
}
.carousel:nth-of-type(29) {
  transition: all 0.8s ease-in-out 0.028s;
}
.carousel:nth-of-type(29) div.carousel-item {
  background-position: -224px 0;
}
.carousel:nth-of-type(30) {
  transition: all 0.8s ease-in-out 0.029s;
}
.carousel:nth-of-type(30) div.carousel-item {
  background-position: -232px 0;
}
.carousel:nth-of-type(31) {
  transition: all 0.8s ease-in-out 0.03s;
}
.carousel:nth-of-type(31) div.carousel-item {
  background-position: -240px 0;
}
.carousel:nth-of-type(32) {
  transition: all 0.8s ease-in-out 0.031s;
}
.carousel:nth-of-type(32) div.carousel-item {
  background-position: -248px 0;
}
.carousel:nth-of-type(33) {
  transition: all 0.8s ease-in-out 0.032s;
}
.carousel:nth-of-type(33) div.carousel-item {
  background-position: -256px 0;
}
.carousel:nth-of-type(34) {
  transition: all 0.8s ease-in-out 0.033s;
}
.carousel:nth-of-type(34) div.carousel-item {
  background-position: -264px 0;
}
.carousel:nth-of-type(35) {
  transition: all 0.8s ease-in-out 0.034s;
}
.carousel:nth-of-type(35) div.carousel-item {
  background-position: -272px 0;
}
.carousel:nth-of-type(36) {
  transition: all 0.8s ease-in-out 0.035s;
}
.carousel:nth-of-type(36) div.carousel-item {
  background-position: -280px 0;
}
.carousel:nth-of-type(37) {
  transition: all 0.8s ease-in-out 0.036s;
}
.carousel:nth-of-type(37) div.carousel-item {
  background-position: -288px 0;
}
.carousel:nth-of-type(38) {
  transition: all 0.8s ease-in-out 0.037s;
}
.carousel:nth-of-type(38) div.carousel-item {
  background-position: -296px 0;
}
.carousel:nth-of-type(39) {
  transition: all 0.8s ease-in-out 0.038s;
}
.carousel:nth-of-type(39) div.carousel-item {
  background-position: -304px 0;
}
.carousel:nth-of-type(40) {
  transition: all 0.8s ease-in-out 0.039s;
}
.carousel:nth-of-type(40) div.carousel-item {
  background-position: -312px 0;
}
.carousel:nth-of-type(41) {
  transition: all 0.8s ease-in-out 0.04s;
}
.carousel:nth-of-type(41) div.carousel-item {
  background-position: -320px 0;
}
.carousel:nth-of-type(42) {
  transition: all 0.8s ease-in-out 0.041s;
}
.carousel:nth-of-type(42) div.carousel-item {
  background-position: -328px 0;
}
.carousel:nth-of-type(43) {
  transition: all 0.8s ease-in-out 0.042s;
}
.carousel:nth-of-type(43) div.carousel-item {
  background-position: -336px 0;
}
.carousel:nth-of-type(44) {
  transition: all 0.8s ease-in-out 0.043s;
}
.carousel:nth-of-type(44) div.carousel-item {
  background-position: -344px 0;
}
.carousel:nth-of-type(45) {
  transition: all 0.8s ease-in-out 0.044s;
}
.carousel:nth-of-type(45) div.carousel-item {
  background-position: -352px 0;
}
.carousel:nth-of-type(46) {
  transition: all 0.8s ease-in-out 0.045s;
}
.carousel:nth-of-type(46) div.carousel-item {
  background-position: -360px 0;
}
.carousel:nth-of-type(47) {
  transition: all 0.8s ease-in-out 0.046s;
}
.carousel:nth-of-type(47) div.carousel-item {
  background-position: -368px 0;
}
.carousel:nth-of-type(48) {
  transition: all 0.8s ease-in-out 0.047s;
}
.carousel:nth-of-type(48) div.carousel-item {
  background-position: -376px 0;
}
.carousel:nth-of-type(49) {
  transition: all 0.8s ease-in-out 0.048s;
}
.carousel:nth-of-type(49) div.carousel-item {
  background-position: -384px 0;
}
.carousel:nth-of-type(50) {
  transition: all 0.8s ease-in-out 0.049s;
}
.carousel:nth-of-type(50) div.carousel-item {
  background-position: -392px 0;
}
.carousel:nth-of-type(51) {
  transition: all 0.8s ease-in-out 0.05s;
}
.carousel:nth-of-type(51) div.carousel-item {
  background-position: -400px 0;
}
.carousel:nth-of-type(52) {
  transition: all 0.8s ease-in-out 0.051s;
}
.carousel:nth-of-type(52) div.carousel-item {
  background-position: -408px 0;
}
.carousel:nth-of-type(53) {
  transition: all 0.8s ease-in-out 0.052s;
}
.carousel:nth-of-type(53) div.carousel-item {
  background-position: -416px 0;
}
.carousel:nth-of-type(54) {
  transition: all 0.8s ease-in-out 0.053s;
}
.carousel:nth-of-type(54) div.carousel-item {
  background-position: -424px 0;
}
.carousel:nth-of-type(55) {
  transition: all 0.8s ease-in-out 0.054s;
}
.carousel:nth-of-type(55) div.carousel-item {
  background-position: -432px 0;
}
.carousel:nth-of-type(56) {
  transition: all 0.8s ease-in-out 0.055s;
}
.carousel:nth-of-type(56) div.carousel-item {
  background-position: -440px 0;
}
.carousel:nth-of-type(57) {
  transition: all 0.8s ease-in-out 0.056s;
}
.carousel:nth-of-type(57) div.carousel-item {
  background-position: -448px 0;
}
.carousel:nth-of-type(58) {
  transition: all 0.8s ease-in-out 0.057s;
}
.carousel:nth-of-type(58) div.carousel-item {
  background-position: -456px 0;
}
.carousel:nth-of-type(59) {
  transition: all 0.8s ease-in-out 0.058s;
}
.carousel:nth-of-type(59) div.carousel-item {
  background-position: -464px 0;
}
.carousel:nth-of-type(60) {
  transition: all 0.8s ease-in-out 0.059s;
}
.carousel:nth-of-type(60) div.carousel-item {
  background-position: -472px 0;
}
.carousel:nth-of-type(61) {
  transition: all 0.8s ease-in-out 0.06s;
}
.carousel:nth-of-type(61) div.carousel-item {
  background-position: -480px 0;
}
.carousel:nth-of-type(62) {
  transition: all 0.8s ease-in-out 0.061s;
}
.carousel:nth-of-type(62) div.carousel-item {
  background-position: -488px 0;
}
.carousel:nth-of-type(63) {
  transition: all 0.8s ease-in-out 0.062s;
}
.carousel:nth-of-type(63) div.carousel-item {
  background-position: -496px 0;
}
.carousel:nth-of-type(64) {
  transition: all 0.8s ease-in-out 0.063s;
}
.carousel:nth-of-type(64) div.carousel-item {
  background-position: -504px 0;
}
.carousel:nth-of-type(65) {
  transition: all 0.8s ease-in-out 0.064s;
}
.carousel:nth-of-type(65) div.carousel-item {
  background-position: -512px 0;
}
.carousel:nth-of-type(66) {
  transition: all 0.8s ease-in-out 0.065s;
}
.carousel:nth-of-type(66) div.carousel-item {
  background-position: -520px 0;
}
.carousel:nth-of-type(67) {
  transition: all 0.8s ease-in-out 0.066s;
}
.carousel:nth-of-type(67) div.carousel-item {
  background-position: -528px 0;
}
.carousel:nth-of-type(68) {
  transition: all 0.8s ease-in-out 0.067s;
}
.carousel:nth-of-type(68) div.carousel-item {
  background-position: -536px 0;
}
.carousel:nth-of-type(69) {
  transition: all 0.8s ease-in-out 0.068s;
}
.carousel:nth-of-type(69) div.carousel-item {
  background-position: -544px 0;
}
.carousel:nth-of-type(70) {
  transition: all 0.8s ease-in-out 0.069s;
}
.carousel:nth-of-type(70) div.carousel-item {
  background-position: -552px 0;
}
.carousel:nth-of-type(71) {
  transition: all 0.8s ease-in-out 0.07s;
}
.carousel:nth-of-type(71) div.carousel-item {
  background-position: -560px 0;
}
.carousel:nth-of-type(72) {
  transition: all 0.8s ease-in-out 0.071s;
}
.carousel:nth-of-type(72) div.carousel-item {
  background-position: -568px 0;
}
.carousel:nth-of-type(73) {
  transition: all 0.8s ease-in-out 0.072s;
}
.carousel:nth-of-type(73) div.carousel-item {
  background-position: -576px 0;
}
.carousel:nth-of-type(74) {
  transition: all 0.8s ease-in-out 0.073s;
}
.carousel:nth-of-type(74) div.carousel-item {
  background-position: -584px 0;
}
.carousel:nth-of-type(75) {
  transition: all 0.8s ease-in-out 0.074s;
}
.carousel:nth-of-type(75) div.carousel-item {
  background-position: -592px 0;
}
.carousel:nth-of-type(76) {
  transition: all 0.8s ease-in-out 0.075s;
}
.carousel:nth-of-type(76) div.carousel-item {
  background-position: -600px 0;
}
.carousel:nth-of-type(77) {
  transition: all 0.8s ease-in-out 0.076s;
}
.carousel:nth-of-type(77) div.carousel-item {
  background-position: -608px 0;
}
.carousel:nth-of-type(78) {
  transition: all 0.8s ease-in-out 0.077s;
}
.carousel:nth-of-type(78) div.carousel-item {
  background-position: -616px 0;
}
.carousel:nth-of-type(79) {
  transition: all 0.8s ease-in-out 0.078s;
}
.carousel:nth-of-type(79) div.carousel-item {
  background-position: -624px 0;
}
.carousel:nth-of-type(80) {
  transition: all 0.8s ease-in-out 0.079s;
}
.carousel:nth-of-type(80) div.carousel-item {
  background-position: -632px 0;
}
.carousel:nth-of-type(81) {
  transition: all 0.8s ease-in-out 0.08s;
}
.carousel:nth-of-type(81) div.carousel-item {
  background-position: -640px 0;
}
.carousel:nth-of-type(82) {
  transition: all 0.8s ease-in-out 0.081s;
}
.carousel:nth-of-type(82) div.carousel-item {
  background-position: -648px 0;
}
.carousel:nth-of-type(83) {
  transition: all 0.8s ease-in-out 0.082s;
}
.carousel:nth-of-type(83) div.carousel-item {
  background-position: -656px 0;
}
.carousel:nth-of-type(84) {
  transition: all 0.8s ease-in-out 0.083s;
}
.carousel:nth-of-type(84) div.carousel-item {
  background-position: -664px 0;
}
.carousel:nth-of-type(85) {
  transition: all 0.8s ease-in-out 0.084s;
}
.carousel:nth-of-type(85) div.carousel-item {
  background-position: -672px 0;
}
.carousel:nth-of-type(86) {
  transition: all 0.8s ease-in-out 0.085s;
}
.carousel:nth-of-type(86) div.carousel-item {
  background-position: -680px 0;
}
.carousel:nth-of-type(87) {
  transition: all 0.8s ease-in-out 0.086s;
}
.carousel:nth-of-type(87) div.carousel-item {
  background-position: -688px 0;
}
.carousel:nth-of-type(88) {
  transition: all 0.8s ease-in-out 0.087s;
}
.carousel:nth-of-type(88) div.carousel-item {
  background-position: -696px 0;
}
.carousel:nth-of-type(89) {
  transition: all 0.8s ease-in-out 0.088s;
}
.carousel:nth-of-type(89) div.carousel-item {
  background-position: -704px 0;
}
.carousel:nth-of-type(90) {
  transition: all 0.8s ease-in-out 0.089s;
}
.carousel:nth-of-type(90) div.carousel-item {
  background-position: -712px 0;
}
.carousel:nth-of-type(91) {
  transition: all 0.8s ease-in-out 0.09s;
}
.carousel:nth-of-type(91) div.carousel-item {
  background-position: -720px 0;
}
.carousel:nth-of-type(92) {
  transition: all 0.8s ease-in-out 0.091s;
}
.carousel:nth-of-type(92) div.carousel-item {
  background-position: -728px 0;
}
.carousel:nth-of-type(93) {
  transition: all 0.8s ease-in-out 0.092s;
}
.carousel:nth-of-type(93) div.carousel-item {
  background-position: -736px 0;
}
.carousel:nth-of-type(94) {
  transition: all 0.8s ease-in-out 0.093s;
}
.carousel:nth-of-type(94) div.carousel-item {
  background-position: -744px 0;
}
.carousel:nth-of-type(95) {
  transition: all 0.8s ease-in-out 0.094s;
}
.carousel:nth-of-type(95) div.carousel-item {
  background-position: -752px 0;
}
.carousel:nth-of-type(96) {
  transition: all 0.8s ease-in-out 0.095s;
}
.carousel:nth-of-type(96) div.carousel-item {
  background-position: -760px 0;
}
.carousel:nth-of-type(97) {
  transition: all 0.8s ease-in-out 0.096s;
}
.carousel:nth-of-type(97) div.carousel-item {
  background-position: -768px 0;
}
.carousel:nth-of-type(98) {
  transition: all 0.8s ease-in-out 0.097s;
}
.carousel:nth-of-type(98) div.carousel-item {
  background-position: -776px 0;
}
.carousel:nth-of-type(99) {
  transition: all 0.8s ease-in-out 0.098s;
}
.carousel:nth-of-type(99) div.carousel-item {
  background-position: -784px 0;
}
.carousel:nth-of-type(100) {
  transition: all 0.8s ease-in-out 0.099s;
}
.carousel:nth-of-type(100) div.carousel-item {
  background-position: -792px 0;
}
.carousel .carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}
.carousel .carousel-item:nth-of-type(1) {
  transform: translateZ(225px);
  background: url(../image/1.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(2) {
  transform: translateY(-225px) rotateX(90deg);
  background: url(../image/2.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(3) {
  transform: translateZ(-225px) rotateX(180deg);
  background: url(../image/3.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(4) {
  transform: translateY(225px) rotateX(-90deg);
  background: url(../image/4.jfif) no-repeat;
  background-size: cover;
}
.next {
  width: 80px;
  font-size: 16px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
}
@keyframes nextFlip2 {
  0% {
    transform: rotateY(0deg);
  }
  10.5% {
    transform: rotateY(180deg);
  }
  20% {
    transform: rotateY(0deg);
  }
  30.5% {
    transform: rotateY(180deg);
  }
  40% {
    transform: rotateY(0deg);
  }
  50.5% {
    transform: rotateY(180deg);
  }
  60% {
    transform: rotateY(0deg);
  }
  70.5% {
    transform: rotateY(180deg);
  }
  80% {
    transform: rotateY(0deg);
  }
  90.5% {
    transform: rotateY(180deg);
  }
}
